// AIToolsPage.tsx
import React from 'react';
import './Authoring_tool.scss'; // 导入组件的样式文件

// 图片资源导入 - 实际项目中需要替换为真实的图片路径
import aiDesignImage from '../../../public/Authoring_tool/1.jpg'; // AI设计工具的预览图
import graphicDesignImage from '../../../public/Authoring_tool/2.jpg'; // 平面设计工具的预览图
import imageEditImage from '../../../public/Authoring_tool/3.jpg'; // 图片编辑工具的预览图

/**
 * 工具项数据接口定义
 * 规定了每个工具项必须具备的数据结构
 */
interface ToolItemData {
  icon: string; // 工具图标（表情符号或文字）
  title: string; // 工具名称（默认显示）
  previewImage: string; // 悬停时显示的预览图片路径
  hoverTitle: string; // 悬停时显示的文字（带>符号）
}

/**
 * AI工具数据配置
 * 包含所有AI工具的分类数据
 * 每个对象代表一个AI工具卡片
 */
const aiTools: ToolItemData[] = [
  {
    icon: '🖼️', // 画框表情
    title: 'AI设计', // 工具名称
    previewImage: aiDesignImage, // 预览图片
    hoverTitle: 'AI设计 >' // 悬停文字
  },
  {
    icon: '🎨', // 调色板表情
    title: 'AI文案', 
    previewImage: graphicDesignImage,
    hoverTitle: 'AI文案 >'
  },
  {
    icon: '💥', // 爆炸表情
    title: 'AI绘图',
    previewImage: imageEditImage,
    hoverTitle: 'AI绘图 >'
  },
  {
    icon: '✨', // 闪光表情
    title: 'AI商品图',
    previewImage: aiDesignImage,
    hoverTitle: 'AI商品图 >'
  }
];

/**
 * 设计工具数据配置
 * 包含所有设计工具的分类数据
 */
const designTools: ToolItemData[] = [
  {
    icon: '➕', // 加号表情
    title: '新建画布',
    previewImage: graphicDesignImage,
    hoverTitle: '新建画布 >'
  },
  {
    icon: '✦', // 星形符号
    title: '图片编辑',
    previewImage: imageEditImage,
    hoverTitle: '图片编辑 >'
  },
  {
    icon: '📱', // 手机表情
    title: '拼图',
    previewImage: aiDesignImage,
    hoverTitle: '拼图 >'
  },
  {
    icon: '🖥️', // 显示器表情
    title: '批量套版',
    previewImage: graphicDesignImage,
    hoverTitle: '批量套版 >'
  },
  {
    icon: '📊', // 图表表情
    title: 'H5页面制作',
    previewImage: imageEditImage,
    hoverTitle: 'H5页面制作 >'
  },
  {
    icon: '📰', // 报纸表情
    title: '尺寸延展',
    previewImage: aiDesignImage,
    hoverTitle: '尺寸延展 >'
  },
  {
    icon: '📌', // 图钉表情
    title: '图文创作',
    previewImage: graphicDesignImage,
    hoverTitle: '图文创作 >'
  },
  {
    icon: '✉️', // 信封表情
    title: '在线PS',
    previewImage: imageEditImage,
    hoverTitle: '在线PS >'
  },
  {
    icon: '📅', // 日历表情
    title: '创意画布',
    previewImage: aiDesignImage,
    hoverTitle: '创意画布 >'
  },
  {
    icon: '📋', // 剪贴板表情
    title: '视频剪辑',
    previewImage: graphicDesignImage,
    hoverTitle: '视频剪辑 >'
  },
  {
    icon: '📝', // 备忘录表情
    title: 'PSD转模版',
    previewImage: imageEditImage,
    hoverTitle: 'PSD转模版 >'
  },
  {
    icon: '🎭', // 面具表情
    title: '涂鸦笔',
    previewImage: aiDesignImage,
    hoverTitle: '涂鸦笔 >'
  },
  {
    icon: '🛍️', // 购物袋表情
    title: '转格式',
    previewImage: graphicDesignImage,
    hoverTitle: '转格式 >'
  }
];

/**
 * 图片处理工具数据配置
 * 包含所有图片处理工具的分类数据
 */
const imageTools: ToolItemData[] = [
  {
    icon: '✎', // 铅笔符号
    title: 'AI抠图',
    previewImage: imageEditImage,
    hoverTitle: 'AI抠图 >'
  },
  {
    icon: '🔄', // 循环箭头表情
    title: '放大镜',
    previewImage: aiDesignImage,
    hoverTitle: '放大镜 >'
  },
  {
    icon: '📏', // 直尺表情
    title: 'AI人像背景',
    previewImage: graphicDesignImage,
    hoverTitle: 'AI人像背景 >'
  },
  {
    icon: '🎚️', // 滑块控制表情
    title: 'AI消除',
    previewImage: imageEditImage,
    hoverTitle: 'AI消除 >'
  },
  {
    icon: '✂️', // 剪刀表情
    title: 'AI变清晰',
    previewImage: aiDesignImage,
    hoverTitle: 'AI变清晰 >'
  },
  {
    icon: '🖍️', // 蜡笔表情
    title: 'AI滤镜',
    previewImage: graphicDesignImage,
    hoverTitle: 'AI滤镜 >'
  },
  {
    icon: '🖌️', // 画笔表情
    title: 'AI扩图',
    previewImage: imageEditImage,
    hoverTitle: 'AI扩图 >'
  },
  {
    icon: '🔍', // 放大镜表情
    title: '批量抠商品',
    previewImage: aiDesignImage,
    hoverTitle: '批量抠商品 >'
  },
  {
    icon: '🌄', // 山景表情
    title: '批量抠人像',
    previewImage: graphicDesignImage,
    hoverTitle: '批量抠人像 >'
  },
  {
    icon: '🧩', // 拼图表情
    title: '证件照',
    previewImage: imageEditImage,
    hoverTitle: '证件照 >'
  },
  {
    icon: '🖼️', // 画框表情
    title: '切图',
    previewImage: aiDesignImage,
    hoverTitle: '切图 >'
  },
  {
    icon: '📐', // 三角尺表情
    title: '调色',
    previewImage: graphicDesignImage,
    hoverTitle: '调色 >'
  },
  {
    icon: '🌈', // 彩虹表情
    title: '图片压缩',
    previewImage: imageEditImage,
    hoverTitle: '图片压缩 >'
  },
  {
    icon: '🔲', // 阴影方块表情
    title: '滤镜',
    previewImage: aiDesignImage,
    hoverTitle: '滤镜 >'
  }
];

/**
 * 工具项组件的属性接口
 * 规定了ToolItem组件接收的props类型
 */
interface ToolItemProps {
  tool: ToolItemData; // 接收一个ToolItemData类型的工具对象
}

/**
 * 工具项组件
 * @param {ToolItemProps} props - 组件属性
 * @returns {JSX.Element} 工具项组件
 */
const ToolItem: React.FC<ToolItemProps> = ({ tool }) => {
  return (
    <div className="tool-item">
      {/* 图标和标题容器 */}
      <div className="tool-icon-and-title">
        {/* 工具图标 - 显示传入的emoji或文字图标 */}
        <div className="tool-icon">{tool.icon}</div>
        {/* 默认显示的工具标题 */}
        <div className="tool-title">{tool.title}</div>
        {/* 悬停时显示的文字（带>符号） - 默认隐藏 */}
        <div className="hover-title">{tool.hoverTitle}</div>
      </div>
      
      {/* 图片预览 - 只在有预览图片时渲染 */}
      {tool.previewImage && (
        <div className="image-preview">
          <img 
            src={tool.previewImage} 
            alt={tool.title} 
            loading="lazy" // 图片懒加载优化性能
          />
        </div>
      )}
    </div>
  );
};

/**
 * 创作工具主组件
 * 包含所有工具分类的展示
 * @returns {JSX.Element} 创作工具页面组件
 */
const CreativeTools: React.FC = () => {
  return (
    <div className="tool-box">
      {/* AI工具区域 */}
      <h2 className="section-title">AI工具</h2>
      <div className="tool-container">
        {/* 遍历aiTools数组渲染每个AI工具 */}
        {aiTools.map((tool, index) => (
          <ToolItem key={`ai-${index}`} tool={tool} />
        ))}
      </div>
      
      {/* 设计工具区域 */}
      <h2 className="section-title">设计工具</h2>
      <div className="tool-container">
        {/* 遍历designTools数组渲染每个设计工具 */}
        {designTools.map((tool, index) => (
          <ToolItem key={`design-${index}`} tool={tool} />
        ))}
      </div>
      
      {/* 图片处理区域 */}
      <h2 className="section-title">图片处理</h2>
      <div className="tool-container">
        {/* 遍历imageTools数组渲染每个图片处理工具 */}
        {imageTools.map((tool, index) => (
          <ToolItem key={`image-${index}`} tool={tool} />
        ))}
      </div>
    </div>
  );
};

export default CreativeTools;